<template>
<div>
	<!-- 1. 利用mini-ui的header组件实现这个歌系统的头部 -->
	<mt-header fixed title="vue商城系统"></mt-header>

	<!--1.1 统一的返回按钮-->
	<div v-if="isshow" id="back">
         <a href="javascript:void(0);" @click="backto">返回</a>
	</div>
	<!-- 2.0 利用vue-router的<router-view></router-view> 进行占位-->
	<router-view></router-view>

	<!-- 3. 利用mui中的tabbar组件实现商城的底部 -->
		<nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item" to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-chat">
				<span class="mui-icon mui-icon-email">
					
					</span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item" to="/shopcar/car">
				<span class="mui-icon mui-icon-contact">
					<span id="badage" class="mui-badge" v-text="totalcount"></span>
				</span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</router-link>
		</nav>
</div>
</template>

<script>
// 按需导出
import { Toast } from 'mint-ui';

import {vm, COUNT_EVENT, TOTAL_COUNT_EVENT} from "./kits/vm.js";
import {gettotalcount} from "./kits/myLocalStorage.js";

//利用vm.$on()来注册COUNT这个常量代表的事件
vm.$on(COUNT_EVENT, function (count) {
    //将count的值追加到购物车小图标上面
	console.log("Tc:" +  count);
	var badageobj = document.getElementById("badage");
	badageobj.innerText = parseInt(badageobj.innerText) + count;

});

vm.$on(TOTAL_COUNT_EVENT, function (totalcount) {
		var badageobj = document.getElementById("badage");
		badageobj.innerText = totalcount;
});

export default { //es6的导出对象语法
  data () {
    return {
    	isshow: false,
		totalcount:0
    }
  },
	watch: {
		/**
		 * 监控路由，当路由发生编号，做出相应处理
		 * @param newroute
		 * @param oldroute
		 */
      '$route': function (newroute, oldroute)  {
          this.canbuttonshow();
	  },
	},
	created() {
		/**
		 * 当页面刷新时，从新渲染vm，需要判断当前页面是否显示返回按钮，如果是/home，则不显示
		 */
		this.canbuttonshow();
		this.getcount();
	},
  methods: {
	  /**
	   * 更新底部的按钮的数量
	   */
      getcount() {
          var tc = gettotalcount();
          console.log(tc);
          this.totalcount = tc;
	  },
  	backto() {
  		//利用路由对象中的go(01)来是西安返回到上一级的页面
		//这个方法是vue-router的方法
		this.$router.go(-1);
	},
	  canbuttonshow(){
  	    var path = this.$route.path;
		  if (path.toLowerCase()== "/home") {
			  this.isshow = false;
		  }else {
			  this.isshow = true;
		  }
	  }
  }
}
</script>
<style>
	#back {
		width: 60px;
		position: fixed;
        top:10px;
		left: 10px;
		z-index: 100;
	}
	#back a{
		color: white;
		font-size: 16px;
		font-weight: bold;
	}
</style>